<template>
  <div class="relative h-12 select-none">
    <div class="flex items-center h-full">
      <div
        v-for="(item, idx) in modules"
        :key="item.id"
        class="tab-item w-24 text-center h-full leading-[3rem] cursor-pointer text-[#A8ABB2] transition-colors duration-200"
        :class="{ '!text-[#369AFE] font-semibold': idx === activeIndex }"
        @click="setActive(item, idx)"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 指示条 -->
    <div
      class="absolute bottom-0 h-1 w-24 bg-[#49A9FF] transition-all duration-300"
      :style="{
        left: indicatorLeft + 'px'
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const modules = ref([
  { id: 1, name: '导入', path: '/' },
  { id: 2, name: '图像处理', path: '/image-process' },
  { id: 3, name: '拼接处理', path: '/splicing-processing' },
  { id: 4, name: '导出', path: '/export' }
])

const activeIndex = ref(0)

const indicatorLeft = ref(0)

const setActive = (module, idx: number) => {
  activeIndex.value = idx
  indicatorLeft.value = idx * 100
  router.push(module.path)
}
</script>

<style scoped></style>
